import {report,getCode} from './request.js'
(async function(){
//进入前提: 有uname uphone
//利用uname与uphone发送请求获取token
const [bigbox,count,qr_filter,qr_img,spinner,title] = [
    document.getElementById('bigbox'),
    document.getElementById('count'),
    document.getElementById('qr_filter'),
    document.getElementById('qr_img'),
    document.getElementById('spinner'),
    document.getElementById('title')
]
    let dataReport = {
        phone: sessionStorage.getItem('uphone'),
        name: sessionStorage.getItem('uname')
    }
    const resReport = await report(dataReport)
        const reportArr = resReport.result
        if(reportArr.length>0){
            title.firstElementChild.innerHTML = `我的预约`
            count.innerHTML = `共 ${reportArr.length} 条`
            //按预约日期排序
            reportArr.sort((a,b)=>{
                return (new Date(a.day_time)-new Date(b.day_time))
            })
            //用于装载过期的预约
            let fragment = document.createDocumentFragment();
            //由于计算是否过期
            const today = new Date();
            reportArr.forEach((ele)=>{
                //获取到的二维码链接
                //判断过期
                let show_session = ""
                let bookdate;
                switch (ele.show_id) {
                    case '1':
                        bookdate = new Date(`${ele.day_time}T12:00:00`);
                        show_session = "09:00-12:00";
                        break;
                    case '2':
                        bookdate = new Date(`${ele.day_time}T14:30:00`);
                        show_session = "12:00-14:30";
                        break;
                    case '3':
                        bookdate = new Date(`${ele.day_time}T17:00:00`);
                        show_session = "14:30-17:00";
                        break;                
                    default:
                        console.log('this show_id无效')
                        break;
                }
                const sec = today-bookdate
                let divs = document.createElement('div');
                divs.classList.add('bookItem')
                divs.setAttribute('data-id',`${ele.id}`)
                let disFlag="";
                if(sec <= 0){
                    //没过期把黑色过期滤镜去掉
                    disFlag = "display_none"
                    //用于点击事件获取自定义属性qrEvent是不是为true
                    divs.setAttribute('data-qrEvent',true)
                }
                divs.innerHTML = `
                    <div class="details">
                        <div class="myname">姓名:<span>${ele.name}</span></div>
                        <div class="mydate">日期:<span>${ele.day_time}</span></div>
                        <div class="mysession">场次:<span>${show_session}</span></div>
                    </div>
                    <div id="tips">点击查看二维码</div>
                    <div id="itemban" class="itemban ${disFlag}">
                        <div>已过期</div>
                    </div>
                    <div class="bookItem_filter"></div>
                `
                sec <= 0 ? 
                bigbox.appendChild(divs) :
                fragment.appendChild(divs) ;
            })
            bigbox.appendChild(fragment)
            bigbox.addEventListener('click',async function(e){
                // console.dir(e.target)
                // console.dir(e.target.offsetParent)
                if(e.target.className=="bookItem_filter" && e.target.offsetParent.dataset.qrevent=="true"){
                    qr_filter.classList.remove('leftf100vw')
                    spinner.classList.remove('display_none')
                    //获取二维码(id+token)
                    // getCode();
                    //  function getCode(){
                    let dataGetCode = {
                        token : sessionStorage.getItem('token'),
                        id : `${e.target.offsetParent.dataset.id}`
                    }
                    const resGetCode = await getCode(dataGetCode)
                        qr_img.src = `${resGetCode.data.data}`
                        spinner.classList.add('display_none')
                        qr_img.classList.remove('display_none') 
                    
                }
            })
            qr_filter.addEventListener('click',function(){
                qr_img.classList.add('display_none')
                spinner.classList.add('display_none')
                qr_filter.classList.add('leftf100vw')
            })    
        }
        else{
            //没有数据
            bigbox.innerHTML = `
                <div class="bookItem">
                    <div style="padding:20% 0">没有记录</div>
                </div> 
            `
        }
   
})()

